<template>
  <div v-loading="loading" class="observe-dom-container">
    <div ref="scroll" class="scroll-wrapper">
      <div class="scroll-content">
        <div v-for="num in nums"
             :key="num" class="scroll-item">
          {{ nums - num + 1 }}
        </div>
      </div>
    </div>
    <button class="btn" @click="handleClick">append two children element</button>
  </div>
</template>

<script>

import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import {onMounted, onUnmounted, ref} from "vue";

export default {
  name: "ObserveDomX",
  setup() {
    const scroll = ref(null)
    const nums = ref(30);
    BScroll.use(ObserveDOM)
    const bs = ref(null)

    const loading = ref(true)

    onMounted(() => {
      bs.value = new BScroll(scroll.value, {
        observeDOM: true,
        scrollX: true,
        scrollY: false
      });
    })

    onUnmounted(() => {
      bs.value.destroy()
    })

    const handleClick = () => {
      nums.value += 2
    }

    return {
      scroll,
      nums,
      handleClick,
      loading
    }
  }
}
</script>

<style lang="less" scoped>
.observe-dom-container {
  text-align: center;

  .scroll-wrapper {
    width: 90%;
    margin: 80px auto;
    // todo
    white-space: nowrap;
    border: 3px solid #42b983;
    border-radius: 5px;
    overflow: hidden;
    //height: 300px;

    .scroll-content {
      display: inline-block;

      .scroll-item {
        display: inline-block;
        width: 53px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding: 0 20px;

        &:nth-child(2n) {
          background-color: #C3D890;
        }

        &:nth-child(2n+1) {
          background-color: #F2D4A7;
        }
      }
    }
  }

  .btn {
    margin: 40px auto;
    padding: 10px;
    line-height: 35px;
    border-radius: 4px;
    font-size: 20px;

    color: #fff;
    background-color: #666;
  }
}
</style>
